﻿<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>MW-JOB-UI</title>
    <div th:replace="include/_head :: head"></div>
    <style>
        .panel-heading{
            cursor: pointer;
        }
        .table{
            text-align: center;
            font-size: 15px;
        }
    </style>
</head>

<body>
<div class="container" style="margin-top: 30px;">

    <div class="row">
        <div class="col-md-12" style="text-align: right">
            <button class="btn btn-success" onclick="window.location=ctx;">刷新</button>
        </div>
    </div>

    <div class="row" th:each="single:${list}" style="margin-top: 20px;">
        <div class="col-md-12">
            <div class="panel panel-success">
                <div class="panel-heading" role="tab" th:href="|#collapse_${singleStat.count}|" th:id="|heading_${singleStat.count}|" data-toggle="collapse">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" th:href="|#collapse_${singleStat.count}|" aria-expanded="true"
                           th:aria-controls="|#collapse_${singleStat.count}|" th:text="|${single.key} 调度集群|">
                        </a>
                    </h4>
                </div>
                <div th:id="|collapse_${singleStat.count}|" class="panel-collapse collapse in" role="tabpanel" th:aria-labelledby="|heading_${singleStat.count}|">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-2">
                                <label>调度描述：</label>
                            </div>
                            <div class="col-md-10" th:text="${single.description}">
                            </div>
                        </div>
                        <br/>
                        <br/>
                        <div class="row">
                            <div class="col-md-12">
                                <table class="table table-bordered table-hover table-responsive">
                                    <thead>
                                        <tr>
                                            <th>节点</th>
                                            <th>消费者线程数</th>
                                            <th>环形队形大小</th>
                                            <th>调度周期</th>
                                            <th>生产者状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>

                                    　<tbody th:remove="all-but-first">
                                        <tr th:each="node:${single.nodeList}">
                                            <td><a th:text="${node.nodeInfo}" th:href="${node.nodeInfo}" target="_blank"></a></td>
                                            <td th:text="${node.consumerThreadNum}">2</td>
                                            <td th:text="${node.bufferSize}">2</td>
                                            <td th:text="${node.loopTime}">2</td>
                                            <td th:if="${node.producerState}"><span class="badge" style="background-color: #5cb85c">开启</span></td>
                                            <td th:unless="${node.producerState}"><span class="badge" style="background-color: #d9534f">关闭</span></td>
                                            <td>
                                                <button class="btn btn-success" onclick="triggerState(this);">trigger</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>192.168.0.125:8080</td>
                                            <td>2</td>
                                            <td>16</td>
                                            <td>1000 (ms)</td>
                                            <td>开启</td>
                                            <td>
                                                <button class="btn btn-success">trigger</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>
<script type="text/javascript" th:inline="javascript">

//    var proStatus = [[${proStatus}]];

    $(document).ready(function () {

    });


    function triggerState(who){
        var url = $(who).parent().parent().find("a").html();
        $.ajax({
            url:ctx+"/trigger",
            dataType:"text",
            async:false,
            data:{
                url:url
            },
            success:function(state){
                if (state=="true"){
                    $(who).parent().prev().html('<span class="badge" style="background-color: #5cb85c">开启</span>');
                }else {
                    $(who).parent().prev().html('<span class="badge" style="background-color: #d9534f">关闭</span>');
                }
            },
            error:function (XMLHttpRequest, textStatus, errorThrown){
                alert("系统异常，trigger 状态失败！");
            }
        });
    }



</script>
</body>
</html>